<template>
  <div class="video-info-card" v-if="videoInfo">
    <!-- 视频标题和分类 -->
    <div class="header-info">
      <h2 class="title">{{ videoInfo.title }}</h2>
      <div class="category">
        {{ formatCategory(videoInfo) }}
      </div>
      <p v-if="videoInfo.description" class="description">{{ videoInfo.description }}</p>
    </div>

    <!-- 统计信息 -->
    <div class="stats">
      <div class="stat-item" @click="handleCollect" :class="{ 'liked': isLiked }">
        <van-icon :name="isLiked ? 'good-job' : 'good-job-o'" size="18" />
        <span>{{ formatCount(displayCollectionCount) }}</span>
      </div>
      <div class="stat-item" @click="handleShare">
        <van-icon name="share-o" size="18" />
        <span>{{ formatCount(videoInfo.consumption?.shareCount || 0) }}</span>
      </div>
      <div class="stat-item">
        <van-icon name="down" size="18" />
        <span>缓存</span>
      </div>
      <div class="stat-item" @click="handleFavorite" :class="{ 'favorited': isFavorited }">
        <van-icon :name="isFavorited ? 'star' : 'star-o'" size="18" />
        <span>{{ formatCount(displayFavoriteCount) }}</span>
      </div>
    </div>

    <!-- 作者信息 -->
    <div v-if="videoInfo.author" class="author-info">
      <img :src="videoInfo.author.icon || ''" :alt="videoInfo.author.name" class="author-avatar" />
      <div class="author-details">
        <div class="author-name">{{ videoInfo.author.name }}</div>
        <div class="author-description">{{ videoInfo.author.description || '' }}</div>
      </div>
      <van-button type="primary" size="small" class="follow-btn" @click="handleFollow">
        关注
      </van-button>
    </div>

    <!-- 分隔线 -->
    <div class="divider"></div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { Icon as VanIcon, Button as VanButton, showToast } from 'vant'
import { useFavoritesStore } from '@/stores/favorites'

interface Author {
  id?: number
  name?: string
  icon?: string
  description?: string
}

interface Consumption {
  collectionCount?: number
  realCollectionCount?: number
  shareCount?: number
  replyCount?: number
}

interface VideoInfo {
  id?: string | number
  title?: string
  description?: string
  category?: string
  library?: string
  author?: Author
  consumption?: Consumption
  playUrl?: string
  cover?: string | any
  duration?: number
  tags?: Array<{ name: string }>
}

const props = defineProps<{
  videoInfo?: VideoInfo | null
}>()

const emit = defineEmits<{
  share: []
  collect: []
}>()

const favoritesStore = useFavoritesStore()

// 点赞状态
const isLiked = ref(false)
const likeCountIncrement = ref(0)

// 收藏数字增量
const favoriteCountIncrement = ref(0)

// 检查是否已收藏
const isFavorited = computed(() => {
  if (!props.videoInfo?.id) return false
  return favoritesStore.isFavorited(props.videoInfo.id)
})

// 显示的点赞数（原始值 + 增量）
const displayCollectionCount = computed(() => {
  const baseCount = props.videoInfo?.consumption?.collectionCount || 0
  return baseCount + likeCountIncrement.value
})

// 显示的收藏数（原始值 + 增量）
const displayFavoriteCount = computed(() => {
  const baseCount = props.videoInfo?.consumption?.realCollectionCount || 0
  return baseCount + favoriteCountIncrement.value
})

// 格式化分类显示
const formatCategory = (video: VideoInfo) => {
  if (video.library === 'DAILY_LIBRARY_TYPE') {
    return `#${video.category} / 开眼精选`
  }
  return `#${video.category || ''}`
}

// 格式化数字显示（大于10000转换为W格式）
const formatCount = (count: number | undefined | null): string => {
  if (!count || count === 0) return '0'
  if (count >= 10000) {
    const w = count / 10000
    // 保留一位小数，如果小数部分为0则不显示小数
    const decimal = w % 1
    if (decimal === 0) {
      return `${Math.floor(w)}W`
    }
    // 保留一位小数
    return `${w.toFixed(1)}W`
  }
  return count.toString()
}

// 处理点赞
const handleCollect = () => {
  if (!props.videoInfo) return

  if (!isLiked.value) {
    // 点赞：数字加一
    isLiked.value = true
    likeCountIncrement.value = 1
  } else {
    // 取消点赞：数字减一
    isLiked.value = false
    likeCountIncrement.value = 0
  }
  emit('collect')
}

// 处理收藏/取消收藏
const handleFavorite = () => {
  if (!props.videoInfo) return

  // 检查登录状态
  const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true'
  if (!isLoggedIn) {
    showToast('请先登录')
    return
  }

  const wasFavorited = isFavorited.value
  const success = favoritesStore.toggleFavorite(props.videoInfo)
  if (success) {
    if (!wasFavorited) {
      // 刚收藏，数字加一
      favoriteCountIncrement.value += 1
      showToast('已收藏')
    } else {
      // 取消收藏，数字减一
      favoriteCountIncrement.value = Math.max(0, favoriteCountIncrement.value - 1)
      showToast('已取消收藏')
    }
  }
}

// 处理分享
const handleShare = () => {
  emit('share')
}

// 处理关注
const handleFollow = () => {
  showToast('关注功能需要登录')
}
</script>

<style scoped lang="less">
.video-info-card {
  padding: 17px 13px 16px;
  background: rgba(0, 0, 0, 0.85);
}

.header-info {
  .title {
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    margin: 0 0 8px 0;
    line-height: 1.4;
  }

  .category {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 18px;
  }

  .description {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.2);
    line-height: 1.3;
    margin: 0 0 16px 0;
  }
}

.stats {
  display: flex;
  align-items: center;
  gap: 0;
  height: 40px;

  .stat-item {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.35);
    font-size: 13px;
    padding-top: 5px;

    span {
      line-height: 1;
    }

    &.favorited {
      color: #ffd700;
    }

    &.liked {
      color: #ff6b6b;
    }
  }
}

.author-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-bottom: 15px;

  .author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .author-details {
    flex: 1;
    min-width: 0;

    .author-name {
      font-size: 14px;
      font-weight: bold;
      color: #fff;
      margin-bottom: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .author-description {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.35);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .follow-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
  }
}

.divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.85);
  margin-top: 15px;
}
</style>
